<template>
	<view class="tabs" :style="'font-size:'+fontSize+';color:'+color">
		<view class="top">
			<view class="tab" v-for="item,index in tabsList" :key="index"
			:style="'margin-right:'+padding" :class="index===tabIndex?'activeTab':''" @click="tabClick(index)">
				{{item}}
			</view>
		</view>
		<view class="bottom">
			<view :style="'width:'+lineWidth+'rpx'+
			';left:calc('+leftFontNum*fontWidth+'px + '+tinyMove+'px'+' + '+tabIndex+'*'+padding+');'"
			></view>
		</view>
	</view>
</template>

<script>
export default {
	name:"myTabs",
	data() {
		return {
			
			tabIndex:0,
			leftFontNum:0,
			fontWidth:0,
			tabsNode:[],
			tinyMove:0,
		};
	},
	props:{
		tabsList:{
			type:Array,
			default(){
				return []
			},
			required:true
		},
		fontSize:{
			type:String,
			default:"16px"
		},
		padding:{
			type:String,
			default:"12px"
		},
		color:{
			type:String,
			default:"#212F46"
		},
		lineWidth:{
			type:Number,
			default:48
		}
	},
	created() {
		
	},
	mounted() {
		if(this.tabsList){
			uni.createSelectorQuery().in(this).selectAll('.tab').boundingClientRect(data=>{
				
				this.tabsNode=data
			}).exec(()=>{
				//console.log(this.tabsNode);
				this.fontWidth=this.tabsNode[0].width/this.tabsList[0].length;
				this.tinyMove=((this.tabsNode[0].width-uni.upx2px(this.lineWidth))/2).toFixed(2);
			})
			
		}
	},
	methods:{
		tabClick(index){
			if(index!==this.tabIndex){
				this.tabIndex=index;
				let fontNum=0;
				for(let i=0;i<index;i++){
					fontNum+=this.tabsList[i].length
				}
				this.leftFontNum=fontNum;
				this.tinyMove=((this.tabsNode[index].width-uni.upx2px(this.lineWidth))/2).toFixed(2);
				//console.log(this.tinyMove);
			}
			//console.log(index);
			this.$bus.$emit('typeChange',index)
		}
	}
}
</script>

<style scoped lang="scss">
	.tabs{
		
		
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		
		.top{
			display: flex;
			.tab{
				cursor: pointer;
				&:nth-last-of-type(1){
					margin-right: 0 !important;
				}
			}
			.activeTab{
				font-weight: 500 !important;
			}
		}
		
		.bottom{
			height: 4rpx;
			position: relative;
			>view{
				position: absolute;
				height: 100%;
				background-color: #08C8BD;
				transition: 0.2s;
			}
		}
	}
</style>